<template>
  <section class="recommend">
    <img class="title" src="@/assets/images/home/tuijian.jpg"/>
    <ul class="box">
      <router-link
        v-for="item of recommend.recommendList"
        tag="li"
        :to="'/footer/home/details/' + item.id"
        :key="item.id">
        <img class="pictures" v-lazy="item.imgUrl" alt=""/>
        <div class="item">
          <img class="item_images" v-if="item.titleImage" v-lazy="item.titleImage"/>
          {{item.text}}
        </div>
        <p class="price">
          ￥{{item.price}}
          <span class="price_label" v-if="item.label">{{item.label}}</span>
          <img class="cart" src=""/>
        </p>
      </router-link>
    </ul>
  </section>
</template>

<script>
export default {
  name: 'Recommend',
  props: ['recommend'],
  data () { // 我们在这里用图片代表颜色
    return { // 当页面颜色比较多的时候，可以让后台传参，前台接受，例如titleColor[0] 在页面里加入:class="titleColor(item.type)" type代表后台传给前台的数字
      titleColor: ['activity-green', 'activity-red', 'activity-blue', 'activity-yello']
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '../../../../../../assets/styl/color.styl'
  .recommend
    margin: 0 10px 60px
    overflow hidden
    .title
      width 100%
    .box
      display flex
      flex-wrap wrap
      align-items stretch
      flex-direction row
      box-sizing border-box
      li
        background #fff
        width 49.3%
        margin-left 5px
        margin-bottom 5px
        .pictures
          width 100%
          padding  3px 0 3px
        .item
          font-size 13px
          color #232326
          margin 0 5px
          line-height 1.1
          overflow hidden
          ellipsis2()
          .item_images
            width 22px
            margin-right 3px
          .text
            font-size 17px
            ellipsis2()
        .price
          clearBoth()
          position relative
          color: #f23030
          font-size 17px
          margin 8px 5px 15px
          .price_label
            position absolute
            top -1px
            left 35%
            border 1px solid #e4393c
            color #e4393c
            padding 4px 3px 0
            font-size 16px
            display inline-block // 缩放字体要和它配合使用
            margin-left 4px
            transform: scale(0.8);
            transform-origin: 0 0;
            -ms-transform: scale(0.8);
            /* IE 9 */
            -ms-transform-origin: 0 0;
            /* IE 9 */
            -webkit-transform: scale(0.8);
            /* Safari 和 Chrome */
            -webkit-transform-origin: 0 0;
            /* Safari 和 Chrome */
            -moz-transform: scale(0.8);
            /* Firefox */
            -moz-transform-origin: 0 0;
            /* Firefox */
            -o-transform: scale(0.8);
            /* Opera */
            -o-transform-origin: 0 0;
            /* Opera */
          .cart
            width 25px
            float right
      li:nth-child(odd)
        margin-left 0

  .activity-green
    color green
</style>
